<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" :content="`收款门店设置 -${this.$route.query.name}`">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item>
          <a-checkbox-group v-decorator="['type']" style="width: 100%">
            <a-row>
              <a-col :span="12" v-for="i in option" :key="i.id">
                <a-checkbox :value="i.id">{{ i.storeName }} </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-form-item>
        <a-divider /> 
        <a-form-item :wrapperCol="{ span: 16 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" :loading="loading" icon="check">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getStoreListUsingPOST } from '@/api/api/mendianguanli.ts'
import { settingPayMethodStoreUsingPOST, getPayMethodStoreListUsingPOST } from '@/api/api/xitongguanli.ts'
import pick from 'lodash.pick'
const fields = ['type', 'id']
export default {
  name: 'Shopset',
  data() {
    return {
      option: [],
      queryParam: {
        pageNo: 1,
        pageSize: 999,
        queryCondition: '',
        status: 1,
      },
      detail: {},
      loading: false,
      form: this.$form.createForm(this),
    }
  },
  mounted() {
    this.handleStore()
    this.handleDetail()
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('detail', () => {
      this.detail &&
        this.form.setFieldsValue(
          pick(
            {
              type: this.detail[0].storeIdList.map((item) => {
                return item.id
              }),
            },
            fields
          )
        )
    })
  },
  methods: {
    handleDetail() {
      getPayMethodStoreListUsingPOST({ ...this.queryParam, paymentMethodId: this.$route.params.id })
        .then((res) => {
          this.detail = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    handleStore() {
      getStoreListUsingPOST(this.queryParam)
        .then((res) => {
          this.option = res.data.list
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    // handler
    handleSubmit(e) {
      e.preventDefault()
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          settingPayMethodStoreUsingPOST(
            { paymentMethodId: this.$route.params.id },
            values.type.map((i) => {
              return { storeId: i }
            })
          )
            .then(() => {
              this.loading = false
              this.$message.success('操作成功')
              this.$router.back()
              // 重置表单数据
              this.form.resetFields()
            })
            .catch((error) => {
              this.loading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
  },
}
</script>
